<template>
  <div class="course-image">
    <el-form-item :label="label">
      <el-progress
        v-if="isUploading"
        type="circle"
        :percentage="percentage"
        :width="178"
        :color="colors"
      ></el-progress>
      <!-- upload 组件 -->
      <el-upload
        v-else
        class="avatar-uploader"
        action=""
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :http-request="handleUpload"
      >
        <!-- img 为预览图片的显示位置 -->
        <video v-if="value" :src="value" controls="controls"></video>
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
  </div>
</template>

<script>
import { uploadVideo, progress } from "@/services/file-api";

export default {
  name: "CourseImage",
  props: {
    value: {
      type: String,
    },
    label: {
      type: String,
    },
  },
  data() {
    return {
      // 用于保存上传状态
      isUploading: false,
      // 用于保存上传进度百分比
      percentage: 0,
      colors: [
        { color: "#ff6b6b", percentage: 25 },
        { color: "#fcc419", percentage: 50 },
        { color: "#51cf66", percentage: 75 },
        { color: "#409EFF", percentage: 100 },
      ],
      imgFile: "",
      timeKey: "",
    };
  },
  methods: {
    // 上传前的回调
    beforeAvatarUpload(file) {
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb",
          "video/mov",
          "text/plain",
        ].indexOf(file.type) == -1
      ) {
        this.$message.error("不支持该视频格式!");
        return false;
      } else {
        this.imgFile = new FormData();
        this.imgFile.append("file", file);
        return true;
      }
    },
    // 图片上传处理函数
    async handleUpload() {
      this.isUploading = true;
      try {
        const { data } = await uploadVideo(this.imgFile, (event) => {
          this.percentage = Math.floor((event.loaded / event.total) * 100) / 2;
          if (this.percentage >= 50) {
            this.percentage = 50;
            console.log("开始转存OSS");
            this.timeKey = setInterval(() => {
              progress().then((res) => {
                if (res.data == 0 || res.data == 0) {
                  console.log("转存初始/结束", res.data);
                } else {
                  this.percentage = 50 + parseInt(res.data) / 2;
                  console.log("转存中", res.data);
                }
              });
            }, 3000);
          }
        });
        this.percentage = 100;
        clearInterval(this.timeKey);

        // const { data } = await uploadVideo(this.imgFile);
        this.$emit("input", data.data);
        this.$emit("success");
        this.$message.success("上传成功！");
        this.isUploading = false;
        this.percentage = 0;
      } catch (e) {
        this.$message.error("上传失败！");
        clearInterval(this.timeKey);
        this.isUploading = false;
        this.percentage = 0;
      }
    },
    // 上传图片成功回调
    handleAvatarSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      // console.log("成功", res,file,this.imageUrl);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
